<template>
	<section class="hbox stretch">
		<section>
			<section class="vbox">
				<section class="scrollable padder-lg" id="bjax-target">
					<div class="row">
						<div class="col-md-4" v-for="item in imgs" :key="item">
							<h3 class="font-thin">
								<a :href="item.link">
									<img :src="item.img" alt="" class="r r-2x img-full">
								</a>
							</h3>
						</div>
					</div>

					<div class="text-lg l-h-2x">
						<el-divider></el-divider>
						<span>《坛经》里面六祖惠能大师开悟了，大彻大悟、明心见性。「何期自性，本自清净」 「何期自性，本不生灭」 「何期自性，本自具足」</span>
						<br>
						<span>学佛，为什么学佛？学佛目的就是要回归自性，我们要明心见性，明心见性之后我们的智慧现前了，我们的道德恢复了，才能得到真正的快乐。</span>
						<el-divider></el-divider>
					</div>

					<div class="row row-sm m-t-lg">
						<h3 class="font-thin">推荐</h3>
						<el-divider></el-divider>
						<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" v-for="item in resultList">
							<div class="item">
								<div class="pos-rlt">
									<div class="top">
										<span class="pull-right m-t-sm m-r-sm badge bg-info">6</span>
									</div>
									<div class="bottom">
										<span class="badge bg-info m-l-sm m-b-sm">{{ item.durationTime }}</span>
									</div>
									<!-- 暂停效果 -->
									<!-- <div class="item-overlay r r-2x bg-light dker active"> -->
									<div class="item-overlay opacity r r-2x bg-black">
										<div class="text-info padder m-t-sm text-sm">
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star-o text-muted"></i>
											<i class="fa fa-star-o text-muted"></i>
										</div>
										<div class="center text-center m-t-n">
											<a href="#" data-toggle="class">
												<i class="icon-control-play i-2x text"></i>
												<i class="icon-control-pause i-2x text-active"></i>
											</a>
										</div>
										<div class="bottom padder m-b-sm">
											<a href="#" class="pull-right active" data-toggle="class">
												<i class="fa fa-heart-o text"></i>
												<i class="fa fa-heart text-active text-danger"></i>
											</a>
											<a href="#" data-toggle="class">
												<i class="fa fa-plus-circle text"></i>
												<i class="fa fa-check-circle text-active text-info"></i>
											</a>
										</div>
									</div>
									<a href="#"><img :src="$api.file.url.view + item.poster" alt="" class="r r-2x img-full"></a>
								</div>
								<div class="padder-v">
									<a href="#" class="text-ellipsis">{{ item.title }}</a>
									<a href="#" class="text-ellipsis text-xs text-muted">{{ item.author }}</a>
								</div>
							</div>
						</div>
						<div class="clearfix visible-xs"></div>
					</div>

					<div class="row m-t-lg m-b-lg">
						<div class="col-sm-6">
							<div class="bg-primary wrapper-md r">
								<a href="#">
									<span class="h4 m-b-xs block"><i class=" icon-user-follow i-lg"></i> 登录 | 创建账号</span>
									<span class="text-muted">登录或创建帐户后，保存播放列表并与朋友共享。</span>
								</a>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="bg-black wrapper-md r">
								<a href="#">
									<span class="h4 m-b-xs block"><i class="icon-cloud-download i-lg"></i> 下载手机APP</span>
									<span class="text-muted">让桌面和手机的应用程序随时随地净化我们的心灵、寻找本我。</span>
								</a>
							</div>
						</div>
					</div>
				</section>
			</section>
		</section>
	</section>
	</section>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				keywords: '',
				resultList: [],
				total: 0, // 记录总条数
				pageSize: 12, // 每页显示条数
				pageNo: 1, // 当前的页数
				imgs: [{
					link: "#/book/3",
					img: "http://localhost:8888/file/view/3638c9a1ccab4a83bdbcb6c745b32aa7"
				}, {
					link: "#",
					img: "https://www.guoloujiang.com/wp-content/uploads/2015/01/74812690.jpg"
				}, {
					link: "#",
					img: "https://www.guoloujiang.com/wp-content/uploads/2015/01/4b886f3cg9969535ac093690.jpg"
				}]
			}
		},
		mounted() {
			this.getTopVideos(1);
		},
		methods: {
			getTopVideos(pageNo) {
				this.pageNo = null == pageNo ? 1 : pageNo;
				this.$api.album.query({
					title: this.keywords,
					publish: 1,
					pageSize: this.pageSize,
					pageNo: this.pageNo
				}).then(data => {
					this.resultList = data.rows;
					this.pageNo = data.pageNo;
					if (1 == this.pageNo) {
						this.total = data.total;
					}
					return this.resultList;
				});
			}
		},
	}
</script>

<style scoped>
</style>
